<template>
  <div
    class="class-schedule-item"
    :class="
      currentData.emsCoursePlanH5VOList.length === 0 ? 'not-started' : 'started'
    "
  >
    <div
      :class="['status', `status-${currentData.scheduleStatus}`]"
      v-if="currentData.scheduleStatus !== null"
    >
      {{ scheduleStatusFun(currentData.scheduleStatus) }}
    </div>
    <div class="title">
      <div class="lable" :class="subjectNameStyle(currentData.subjectName)">
        {{ currentData.subjectName ? currentData.subjectName.slice(0, 1) : '' }}
      </div>
      <div class="teacher-name">{{ currentData.teacherName }}</div>
    </div>
    <!-- 课程数 大于 1 个 -->
    <div
      class="see-content"
      v-if="currentData.emsCoursePlanH5VOList.length > 1"
    >
      <div class="text">
        {{ currentData.emsCoursePlanH5VOList.length }}个课程
      </div>
      <!-- 如果是 未开始 状态 显示设置按钮 -->
      <img
        class="stting"
        v-if="currentData.scheduleStatus === 0"
        @click="operationHandle"
        src="@/assets/classSchedule/setting1-icon.png"
        alt=""
      />
      <!-- 如果是 进行中、已结束 显示查看按钮 -->
      <img
        class="see"
        v-if="currentData.scheduleStatus !== 0"
        @click="seePreviewHandle"
        src="@/assets/classSchedule/see2-icon.png"
        alt=""
      />
    </div>

    <!-- 课程数为 1 个 -->
    <div
      class="setting-content"
      v-if="currentData.emsCoursePlanH5VOList.length === 1"
    >
      <div class="text-box">
        <div class="txt">
          {{ currentData.emsCoursePlanH5VOList[0].courseTreeName }}
        </div>
        <!-- 如果是 未开始 状态 显示删除按钮 -->
        <img
          @click="deleteHandle"
          v-if="currentData.scheduleStatus === 0"
          src="@/assets/classSchedule/close-icon.png"
          alt=""
        />
      </div>
      <!-- 如果是 未开始 状态 显示设置按钮 -->
      <img
        class="stting"
        v-if="currentData.scheduleStatus === 0"
        @click="operationHandle"
        src="@/assets/classSchedule/setting1-icon.png"
        alt=""
      />
      <!-- 如果是 进行中、已结束 显示查看按钮 -->
      <img
        class="see"
        v-if="currentData.scheduleStatus !== 0"
        @click="seePreviewHandle"
        src="@/assets/classSchedule/see2-icon.png"
        alt=""
      />
    </div>
    <!-- {{ currentData?.label }} -->
  </div>
</template>
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
export type CoursePlanData = {
  scheduleDate: string // 排课日期
  periodId: string // 节次Id
  courseId: string // 课程Id
  courseName: string // 课程名称
  courseTreeId: string // 课程目录id
  courseTreeName: string // 课程目录名称
  teacherName: '' // 老师名称
  teacherId: string // 老师Id
  startTime: string // 课程开始时间+ 节次开始时间
  endTime: string // 课程结束时间+ 节次结束时间
  courseObjectType: string // 课程类型 (1:行政部,2:教学班)
  courseObjectId: string // 课程Id
  tenantId: string // 租户id
}

export type CurrentTableData = {
  id: string
  classId: string // 班级Id
  classType: string // 班级类型（1:行政班，2:教学班）
  subjectName: string // 课程名称
  scheduleStatus: number | null // 进行状态 (0:未开始，1:进行中，2:已结束)
  teacherId: string // 老师Id
  teacherName: string // 老师名称
  emsCoursePlanH5VOList: CoursePlanData[]
}

const props = defineProps<{
  currentData: CurrentTableData
}>()

const Emit = defineEmits<{
  (e: 'operationHandle', data: CurrentTableData): void
  (e: 'deleteHandle', data: CurrentTableData): void
  (e: 'seePreviewHandle', data: CurrentTableData): void
}>()
const operationHandle = () => {
  Emit('operationHandle', props.currentData)
}

// 进行状态
const scheduleStatusFun = computed(() => {
  return (status: number): string => {
    let statusTxt = '未开始'
    switch (status) {
      case 0:
        statusTxt = '未开始'
        break
      case 1:
        statusTxt = '进行中'
        break
      case 2:
        statusTxt = '已结束'
        break
    }
    return statusTxt
  }
})

// 计算科目css样式
const subjectNameStyle = computed(() => {
  return (name: string): string => {
    let styleClassName = ''
    switch (name) {
      case '语文':
        styleClassName = 'language'
        break
      case '数学':
        styleClassName = 'mathematics'
        break
      case '英语':
        styleClassName = 'english'
        break

      case '物理':
        styleClassName = 'physics'
        break
      case '化学':
        styleClassName = 'chemistry'
        break
      case '生物':
        styleClassName = 'biology'
        break
      case '政治':
        styleClassName = 'politics'
        break
      case '历史':
        styleClassName = 'history'
        break
      case '地理':
        styleClassName = 'geography'
        break
      case '科学':
        styleClassName = 'science'
        break
    }
    return styleClassName
  }
})

// 点击眼睛
const seePreviewHandle = () => {
  Emit('seePreviewHandle', props.currentData)
}
// 删除按钮
const deleteHandle = () => {
  // console.log(props.currentData)
  ElMessageBox.confirm('确认删除该课程数据？', '确认', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    type: 'warning',
    cancelButtonText: '取消'
  }).then(() => {
    Emit('deleteHandle', props.currentData)
  })
}
</script>

<style lang="scss" scoped>
.class-schedule-item {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  border: 1px solid transparent;
  box-sizing: border-box;
  .title {
    padding-top: 15px;
    padding-left: 7px;
    display: flex;
    align-items: center;
    font-size: 14px;
    .lable {
      width: 24px;
      height: 24px;
      line-height: 24px;
      color: #fff;
      border-radius: 2px;
      margin-right: 4px;
      text-align: center;
    }
    .teacher-name {
      font-size: 14px;
      color: #4e5969;
      font-weight: 600;
      max-width: 72px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .status {
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 12px;
    padding: 4px 2px;
    background-color: #fff;
    border-radius: 0px 0px 0px 5px;
  }
  .status-0 {
    color: #ff9a2e;
  }
  .status-1 {
    color: #27c631;
  }
  .status-2 {
    color: #4e5969;
  }
}
.see-content {
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  color: #86909c;
  .text {
    margin-right: 2px;
  }
  img {
    display: block;
    width: 18px;
    cursor: pointer;
  }
}
.setting-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 5px;
  .text-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    max-width: 90px;
    min-width: 70px;
    height: 20px;
    padding-left: 5px;
    padding-right: 10px;
    background: #eefbef;
    border-radius: 4px;
    box-sizing: border-box;
    .txt {
      display: block;
      color: #86909c;
      // width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 1;
    }

    img {
      width: 9px;
      position: absolute;
      top: 2px;
      right: 2px;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .stting {
    width: 17px;
    cursor: pointer;
  }
  .see {
    width: 19px;
    cursor: pointer;
  }
}

// 语文
.language {
  background-color: #fc6a6a;
}
// 数学
.mathematics {
  background-color: #00aeff;
}
// 英语
.english {
  background-color: #ff7dce;
}
// 物理
.physics {
  background-color: #696fff;
}
// 化学
.chemistry {
  background-color: #32d3e8;
}
// 生物
.biology {
  background-color: #59c261;
}
// 政治
.politics {
  background-color: #fc7979;
}
// 历史
.history {
  background-color: #efc442;
}
// 地理
.geography {
  background-color: #ff6a00;
}
// 科学
.science {
  background-color: #c98bfb;
}
</style>
